import React, { Component } from "react";
import { connect } from "react-redux";
import "./SetPayPassword.scss";
import yhTools from "../../../tools/yh";
import { getPayDatas } from "../../../Redux/Action/nativeDatas/nativeDatas";
import MainLayout from "../../../component/mainLayout/mainLayout";
import XHFConfig from "../../../config/XHFConfig";
import { Toast } from "antd-mobile";
import CryptographicNumberInput from "../../viewXHB/paypwdVerify/CryptographicNumberInput";

class Settransactionpassword extends Component {
	constructor(props) {
		super(props);
		this.state = {
			/** 当前支付密码阶段 0 是第一次输入，1是第二次输入 */
			pwdState: 0,
			password: "",
			ispassword: false,
			repPassword: "",
			isrepPassword: false,
			tips: "",
			flag: true //默认关闭sdk
		};
		this.pwdref = React.createRef();
		this.cpwdref = React.createRef();
	}

	componentDidMount() {
		if (this.props.location.query) {
			this.setState({
				flag: false
			});
		}
		let name = yhTools.getUrlParam("name");
		if (name) {
			this.setState({
				flag: false
			});
		}
	}

	/** 密码变化事件 */
	onChangePwd(ispassword) {
		if (ispassword) {
			this.setState({ ispassword, pwdState: 1 }, () =>
				this.pwdref.current.Keyboard.close()
			);
		} else {
			this.setState({ ispassword });
		}
	}

	// 提交
	submit() {
		if (!this.state.isrepPassword) {
			return Toast.info("请再次输入密码", 2);
		}
		Toast.loading("加载中...", 100);
		//console.log(this.state);
		let { password, repPassword } = this.state;
		let objs = {
			url: XHFConfig.xhbSetPassword,
			params: {
				password,
				repPassword
			},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			if (res.code == "0") {
				Toast.hide();
				Toast.info("密码设置成功", 2);
				let name = yhTools.getUrlParam("name");
				let status = yhTools.getUrlParam("success");
				if (name == "addBank") {
					let _q = this.props.location.query;
					if (status === "success") {
						this.props.history.push(
							`/xhbOpenAccountResult?status=success&cardNo=${_q.cardNo}`
						);
					} else {
						this.props.history.push("/xhbOpenAccountResult?status=fail");
					}
				}
			} else {
				Toast.info(res.message, 2);
				this.setState({
					password: "",
					repPassword: "",
					ispassword: false,
					isrepPassword: false,
					pwdState: 0
				});
				this.pwdref.current.reset();
				this.cpwdref.current.reset();
			}
		});
	}
	render() {
		const headerParams = {
			header: {
				title: "设置支付密码",
				goToApp: this.state.flag
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: "1" // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		return (
			<MainLayout pageParams={headerParams}>
				<div className="SetPayPassword">
					<div
						style={{ display: this.state.pwdState === 0 ? "block" : "none" }}
					>
						<div className="showMsg">请设置支付密码</div>

						<div className="pwd_box">
							<CryptographicNumberInput
								ref={this.pwdref}
								onChange={ispassword => this.onChangePwd(ispassword)}
								onComplete={password => this.setState({ password })}
							/>
						</div>
					</div>
					<div
						style={{ display: this.state.pwdState === 1 ? "block" : "none" }}
					>
						<div className="showMsg">请再次确认支付密码</div>

						<div className="pwd_box">
							<CryptographicNumberInput
								ref={this.cpwdref}
								onChange={isrepPassword => this.setState({ isrepPassword })}
								onComplete={repPassword => this.setState({ repPassword })}
							/>
						</div>

						<div className="btn" onClick={() => this.submit()}>
							完成
						</div>
					</div>

					<div className="warnMsg">{this.state.tips}</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_getPayDatas: options => {
			dispatch(getPayDatas(options));
		}
	};
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Settransactionpassword);
